<template>

    <g
        :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')scale('+scale+')'" class="cursor-pointer"
    >
        <!-- 避雷器的 SVG 图形 -->
        <g transform="translate(30,0)">
            <line x1="100" y1="96" x2="123" y2="96" :style="{stroke:color,strokeWidth:2}"></line>
            <circle r="9" cx="132" cy="95" fill="none" :stroke-width="2" :stroke="color"/>
            <circle r="9" cx="142" cy="95" fill="none" :stroke-width="2" :stroke="color"/>
        </g>
    </g>
</template>

<script>
export default {
    name: "twoCircle",
    props: {
        translateX: { type: [Number,String] ,default: 0 },
        translateY: { type:[Number,String] , default: 0 },
        rotate: { type: [Number,String], default: 0 },
        scale: { type: [Number,String], default: 1 },
        name: { type: [Number,String], default: '' },
        stateDesc:{
            type: String,
            default: ""
        },
        color: { type: String, default: '#619fd2' },
        isMainPage:{
            type: Boolean,
            default: false


        },

    },
    methods: {
        itemRightClick(event,stateDesc,isMainPage,name,type) {
            event.preventDefault(); // 阻止默认的右键菜单弹出
            // 显示自定义右键菜单
            const {clientX, clientY} = event
            let params = {
                clientX,
                clientY,
                type,
                stateDesc,
                isMainPage,
                deviceName:name,
            }

            this.$emit('itemRightClick', params)
        },
    },
}
</script>

<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
</style>
